<template>
  <div>
    <div class="crm-container">
      <c-r-m-head
        ref="crmTableHead"
        :crm-type="crmType"
        @handle="handleHandle"
        @on-search="crmSearch"
        @date="dateChange"
        title="渠道名称"
        placeholder="请选择"
      >
      </c-r-m-head>
      <div class="table-container">
        <div class="table-topText">
          <span>计算说明：</span>
          <span>平均ROI=总回款金额÷总消耗</span>
          <span>实际ROI=每天的ROI总和÷天数（近12个月）</span>
          <span>预期ROI=(已还清回款总额+还款中回款总额) ÷总消耗</span>
          <span class="ml-20">预期回款金额=还款中金额+已还清金额</span>
        </div>
        <el-table
          v-loading="loading"
          id="crm-table"
          :row-height="40"
          :data="list"
          border
          :cell-class-name="cellClassName"
          :height="tableHeight"
          :row-key="`${crmType}Id`"
          class="n-table--border"
          highlight-current-row
          style="width: 100%"
          @row-click="handleRowClick"
          @sort-change="sortChange"
        >
          <el-table-column
            v-for="(item, index) in fieldList"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :formatter="fieldFormatter"
            sortable="custom"
            show-overflow-tooltip
            align="center"
          >
            <!-- <template slot-scope="scope">
              <template v-if="item.prop == 'fun'">
                <span class="can-visit--underline" @click="lockRow(scope.row)"
                  >查看明细</span
                >
              </template>
              <template v-else>
                {{ fieldFormatter(scope.row, scope.column) }}
              </template>
            </template> -->
          </el-table-column>
        </el-table>
        <div class="p-contianer">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="pageSizes"
            :page-size.sync="pageSize"
            :total="totalRow"
            :pager-count="5"
            class="p-bar"
            background
            layout="prev, pager, next, sizes, total, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
          <div class="money-bar">
            <span>总计：</span>
            <span>平均ROI: {{ extraData.averageRoi || 0 }} </span>
            <span class="ml-10">实际ROI: {{ extraData.realityRoi || 0 }} </span>
            <span class="ml-10">预期ROI: {{ extraData.expectRoi || 0 }} </span>
            <span class="ml-10">线索数量: {{ extraData.allLeadsNum || 0 }} </span>
            <span class="ml-10">消耗金额: {{ extraData.allPutinMoney || 0 }} </span>
            <span class="ml-10">回款金额: {{ extraData.allReceivablesMoney || 0 }} </span>
            <span class="ml-10">退款金额: {{ extraData.allRefundMoney || 0 }} </span>
            <span class="ml-10">预期回款金额: {{ extraData.allExpectReceivablesMoney || 0 }} </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 表头组件
import CRMHead from "./components/CRMHead.vue";

import Table from "./mixins/table";
export default {
  /** ROI明细 */
  name: "channel",
  mixins: [Table],
  data() {
    return {
      crmType: "channel",
      extraData: {
        averageRoi: "111",
        realityRoi: "222",
        expectRoi: "333"
      }
    };
  },
  components: {
    CRMHead
  },
  computed: {},
  mounted() {
    /** 控制table的高度 */
    window.onresize = () => {
      this.tableHeight = document.documentElement.clientHeight - 300;
      this.treeHeight = document.documentElement.clientHeight - 230;
    };
  },
  methods: {
    /** 搜索 */
    // crmSearch() {},
    handleHandle() {},
    handleRowClick() {},

    /** 查看明细 */
    lockRow() {},
    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "putinPlatform") {
        // return "can-visit--underline";
        return "";
      } else {
        return "";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../styles/table.scss";
.table-container {
  margin-top: 16px;
  padding: 16px;
  background-color: #fff;
}
// 统计说明
.money-bar {
  color: #99a9bf;
  line-height: 44px !important;
  position: absolute;
  left: 20px;
  top: 0;
}
.table-topText {
  margin-bottom: 15px;
  height: 40px;
  line-height: 40px;
  background-color: #e0eaff;
  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    &:first-child {
      color: #333;
      margin-left: 24px;
    }
    &:nth-child(2) {
    }
    &:nth-child(3) {
      margin-left: 20px;
    }
    &:nth-child(4) {
      margin-left: 20px;
    }
  }
}
</style>
